<template>
  <div class="registers">
    <el-form ref="ruleForm" class="form" :style="`margin-top: ${marginTop}px`" :model="ruleForm" label-width="100px">
      <h3>维保用户注册</h3>
      <h5>系统默认为扫码微信登陆，请绑定微信</h5>
      <div class="qrCode reg-wx">
        <Wxlogin class="wx" />
        <span class="tip">请使用微信扫码二维码登陆</span>
      </div>
      <div v-if="!isShow" class="flex reg1 flexdc">
        <el-form-item label="手机号码：" class="m-t-30" prop="phoneNumber">
          <el-input v-model="ruleForm.phoneNumber" clearable class="m-b-15 cor-input" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="短信验证码：" prop="code">
          <el-input v-model="ruleForm.code" clearable class="phoneCode m-b-20 cor-input" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item>
          <div class="flex nextbox">
            <div class="sendbox m-r-20">
              <el-button class="reg-send" :disabled="disabled" @click="handleSend">{{ sendMsg }}</el-button>
            </div>
            <div class="reg-next flex" @click="handleNext">
              <span class="next">下一步</span>
            </div>
            <div class="login-label co-label">version：{{ version }}</div>
          </div>
        </el-form-item>
      </div>

      <div v-else class="reg2 m-t-20">
        <el-form-item label="姓名：" type="userName" prop="userName">
          <el-input v-model="ruleForm.userName" clearable class="pu-i" placeholder="请输入用户姓名" />
        </el-form-item>
        <el-form-item label="登陆账号：" type="account" prop="account">
          <el-input v-model="ruleForm.account" clearable class="pu-i" placeholder="请输入登陆账号" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" clearable show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码：" prop="checkPass">
          <el-input v-model="ruleForm.checkPass" clearable show-password placeholder="请输入确认密码" />
        </el-form-item>

        <el-form-item>
          <div class="flex subbtnbox m-t-20">
            <div class="reg-btn rbtn flex m-r-20" @click="handleSubmit('ruleForm')">
              <span class="zc">注 册</span>
            </div>
            <span class="reg-sub rbtn flex" @click="handleReset('ruleForm')">
              <span class="cz">重 置</span>
            </span>
            <div class="login-label1 co-label">version：{{ version }}</div>
          </div>
        </el-form-item>
      </div>

    </el-form>
    <div class="footers">
      Copyright &copy;2012-2020. All Rights Reserved 凌波技术有限公司
    </div>
  </div>
</template>

<script>

import { register, regNext, regPhoneCode, wXGetOpenId } from '@/api/user'
import Wxlogin from '@/components/wxregister/index'
import userMixin from '@/utils/userMixin'
import { showNotice } from '@/utils/toolclass'
import storage from '@/utils/storage'
// import sendCode from '@/utils/sendCode'

export default {
  components: { Wxlogin },
  mixins: [userMixin],
  data() {
    return {
      version: '0.88',
      isShow: false,
      count: 0,
      sendMsg: '获取验证码',
      timer: null,
      disabled: false,
      marginTop: '',
      ruleForm: {
        // account: '13974828961',
        account: '18692614100',
        code: '',
        password: '123456',
        // phoneNumber: '13974828961',
        phoneNumber: '18692614100',
        sysId: 2,
        userName: '汪海波',
        checkPass: '123456',
        nextCode: '',
        wxId: ''
      }
    }
  },
  mounted() {
    var clientHeight = (document.documentElement.clientHeight || document.body.clientHeight)
    // console.log(document.documentElement.clientHeight)
    if (clientHeight < 930) {
      this.marginTop = 20
    } else {
      this.marginTop = 40
    }
    const url = window.location.href
    this.getLogin(url)
  },
  methods: {
    getLogin(url) {
      if (url.indexOf('code') !== -1) {
        // console.log('用户已扫码，进行授权登陆确认', url)
        const num1 = url.indexOf('code=')
        const num2 = url.indexOf('&state=')
        this.wxcode = url.slice(num1 + 5, num2)
        // console.log('CODE===', this.wxcode)
        // console.log('开始传入CODE')
        wXGetOpenId(this.wxcode).then(res => {
          // console.log('WXOPEN_INFO===', res)
          if (res.code === '000000') {
            storage.set('wxId', res.data)
            this.$router.push({ path: '/wxreg' })
          }
        })
      }
    },
    handleNext() {
      if (!(/^\S+$/.test(this.ruleForm.phoneNumber))) {
        showNotice('error', '提示', '请输入手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.ruleForm.phoneNumber))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.ruleForm.code))) {
        showNotice('error', '提示', '请输入短信验证码')
        return
      } else if (!(/^\d{5}$/.test(this.ruleForm.code))) {
        showNotice('error', '提示', '验证码错误，请重新输入')
        return
      }
      regNext({ phoneNumber: this.ruleForm.phoneNumber, code: this.ruleForm.code }).then(res => {
        this.ruleForm.nextCode = res.data
        // console.log(res)
        this.isShow = true
        this.ruleForm.account = this.ruleForm.phoneNumber
      })
    },
    handleSend() {
      this.count++
      // if (this.count <= 10) {
      if (!(/^\S+$/.test(this.ruleForm.phoneNumber))) {
        showNotice('error', '提示', '请输入手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.ruleForm.phoneNumber))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      } else {
        this.getCode(this.ruleForm.phoneNumber)
      }
      // } else {
      //   showNotice('error', '提示', '一天只能发送10次验证码')
      //   return
      // }
    },
    getCode(phone) {
      if (phone !== undefined && !(/^1[3456789]\d{9}$/.test(phone))) {
        showNotice('error', '提示', '输入的手机号码有误,请重新输入')
        return
      } else {
        regPhoneCode(phone).then(res => {
          if (res.code === '000000') {
            var time = 60
            const timer = setInterval(() => {
              time--
              if (time === 0) {
                clearInterval(timer)
                this.sendMsg = '获取验证码'
                this.disabled = false
                return
              }
              this.sendMsg = time + 's后重新发送'
            }, 1000)
            this.disabled = true
          }
          if (res.code === '100039') {
            this.$router.replace({ path: '/' })
            showNotice('warning', '提示', '手机号已注册，请直接登陆')
            return
          } else {
            showNotice('success', '提示', '验证码发送成功')
            return
          }
        })
      }
    },
    // 提交函数
    handleSubmit() {
      // 验证表单
      if (!(/^\S+$/.test(this.ruleForm.account))) {
        showNotice('error', '提示', '请输入登陆账号')
        return
      }
      if (!(/^\S+$/.test(this.ruleForm.code))) {
        showNotice('error', '提示', '请输入手机验证码')
        return
      }
      if (!(/^\S+$/.test(this.ruleForm.password))) {
        showNotice('error', '提示', '请输入登陆密码')
        return
      } else if (this.ruleForm.checkPass !== this.ruleForm.password) {
        showNotice('error', '提示', '密码错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.ruleForm.phoneNumber))) {
        showNotice('error', '提示', '请输入手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.ruleForm.phoneNumber))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.ruleForm.sysId))) {
        showNotice('error', '提示', '请输入系统常量值')
        return
      }
      if (!(/^\S+$/.test(this.ruleForm.userName))) {
        showNotice('error', '提示', '请输入姓名')
        return
      }
      register({ account: this.ruleForm.account, code: this.ruleForm.nextCode, password: this.ruleForm.password, phoneNumber: this.ruleForm.phoneNumber, sysId: this.ruleForm.sysId, userName: this.ruleForm.userName }).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.$router.push({ path: '/' })
          showNotice('success', '提示', '注册成功')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    },
    // 重置表单函数
    handleReset() {
      this.ruleForm.userName = ''
      this.ruleForm.password = ''
      this.ruleForm.checkPass = ''
    }
  }
}
</script>

<style lang="scss">
.registers .el-form-item__error {
  display: none;
}
.reg1 {
  margin-left: -40px;
}
.reg2 {
  margin-left: -20px;
}
.el-input--prefix .el-input__inner,.bj,
.el-input--suffix .el-input__inner {
  background: #e0e2f6;
  border-radius: 5px;
  color: #919dad;
}
.footers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  color: #ffffff;
  text-align: center;
}
.registers {
  background: url('~@/assets/login/beijing.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  #app .content {
    height: 100%;
  }
  .pu-i {
    width: 196px;
  }
  .login-label {
    position: absolute;
    left: 72px;
    right: 0;
    bottom: -80px;
  }
  .login-label1 {
    position: absolute;
    left: 46px;
    right: 0;
    bottom: -40px;
  }
  .form {
    position: absolute;
    top: 180px;
    right: 16%;
    // width: 540px;
    .el-form-item {
      padding-left: 70px;
      margin-bottom: 10px;
    }
    .reg-next {
      width: 140px;
      height: 50px;
      cursor: pointer;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      // background: url('~@/assets/login/dl.png') no-repeat;
      // background-size: 100% 100%;
      background-image:-webkit-linear-gradient(bottom, #6b73f5,#d79efa);
      .next {
        color: #ffffff;
        font-size: 20px;
      }
    }
    .tip {
      color: #888888;
      font-family: Adobe Heiti Std R;
      margin-left: -10px;
    }
    .nextbox {
      margin-left: -30px;
    }
    .sendbox {
      background: url('~@/assets/login/yzm1.png') no-repeat;
      background-size: 100% 100%;
      .reg-send {
        width: 134px;
        height: 50px;
        border: 0;
        line-height: 28px;
        font-size: 16px;
        cursor: pointer;
        text-align: center;
        background-image:-webkit-linear-gradient(bottom, #6b73f5,#d79efa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    h3 {
      color: #377EF7;
      font-size: 33px;
      text-align: center;
      margin: 0 0 20px 0;
      font-family: Adobe Heiti Std R;
    };
    .phoneCode {
      margin-right: 10px;
    };
    h5 {
      font-family: Adobe Heiti Std R;
      // font-size: 20px;
      margin: 0;
      text-align: center;
      color: #888888;
    }
    .cor-input {
      width: 230px;
    }
  }
  .subbtnbox {
    margin-left: -60px;
    .rbtn {
      width: 140px;
      height: 50px;
      cursor: pointer;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
    }
    .reg-btn {
      background-image:-webkit-linear-gradient(bottom, #6b73f5,#d79efa);
      .zc {
        color: #ffffff;
        font-size: 20px;
      }
    }
    .reg-sub {
      background: #ede7f6;
      .cz {
        font-size: 20px;
        background-image: linear-gradient(360deg,#6b73f5,#d79efa);
        -webkit-background-clip: text;
        color: transparent;
      }
    }
  }
  .reg-wx {
    // width: 500px;
    // height: 300px;
    margin: 20px 0 0 150px;
    .wx {
      background: url('~@/assets/login/wx_bj.png') no-repeat;
      background-size: 164px 165px;
    }
  }
  #login_container {
      // width: 500px;
      height: 180px;
      iframe {
        height: 280px;
      }
    }
}
</style>
